<template>
    <view class="beauty-card" @tap="toDetail">
            
                <image :src="d.cardPicture" class="img" mode="aspectFill" />
                <view class="bottom">
                        <view class="name">{{d.cardName}}</view>
                        <view class="price">
                            <view class="now">￥{{d.cardCurrentprice}}</view>
                            <view class="old">￥{{d.cardOriginalprice}}</view>
                        </view>
                        <view class="shop">
                            <image :src="d.salonSisterphotos" class="head" mode="aspectFill">
                            {{d.salonName}}
                        </view>
                </view>
    </view>    
</template>
<script lang="ts">
  import {Vue, Component, Prop} from 'vue-property-decorator';

  @Component({})
  export default class extends Vue{
      @Prop({type:Object,default:[]}) d!:any;
      toDetail(){
           let { cardId } = this.d;
            uni.navigateTo({
                url: `/detailPackages/pages/beautyDetail/index?cid=${cardId}`
            })
      }
  }  

</script>
<style lang="scss">
    .beauty-card{
        width: 345rpx;
        border-radius: 20rpx;
        overflow: hidden;
        display: inline-block;
        margin-bottom: 20rpx;
        background: #fff;
        
        .img{
            width: 345rpx;
            height: 345rpx;
            vertical-align: top;
        }
        .bottom{
            padding:30rpx;
        }
        .name{
                height: 70rpx;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                font-size: 28rpx;
                line-height: 35rpx;
                color:#333;
                margin-bottom:10rpx;
        }
        .price{
            margin-bottom: 20rpx;
        }
        .now{
            display: inline;
            color:#FF0000;
            font-size: 36rpx;
            padding-right: 15rpx;
        }
        .old{
            display: inline;
            color:#999;
            font-size: 22rpx;
            text-decoration: line-through;
        }
        .shop{
            color:#999;
            font-size: 24rpx;
            line-height: 40rpx;
        }
        .head{
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            vertical-align: top;
            margin-right: 10rpx;
        }
       
    }
</style>

